{extend name="$ibuilder_base" /}

{block name="style"}
    <style type="text/css" media="screen">
        .post-item {
            align-items: flex-start;
            margin-bottom: 15px;
        }
        .post-item .cover {
            margin-right: 15px;
        }
        .post-item .cover img {
            width: 150px;
            height: 100px;
        }
        .post-item .title {
            font-size: 16px;
            color: #303133;
        }
        .post-item .description {
            margin-top: 8px;
            height: 52px;
            font-size: 14px;
            line-height: 26px;
            color: #909399;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .post-item .info {
            font-size: 13px;
            color: #909399;
        }
        .el-aside img {
            width: 100%;
        }
    </style>
{/block}

{block name="banner"}
    <div class="banner-bg" style="background-color: #4AB8FC;">
        <div class="container">
            <img style="height: 400px;" src="<?php echo request()->root(); ?>/static/cms.png" alt="">
        </div>
    </div>
{/block}

{block name="main"}
    <div class="container flex" style="align-items: flex-start;padding-top: 20px;">
        <el-main style="padding-right: 20px !important;">
            <div class="post-list">
                {volist name="data_list" id="vo"}
                    <a class="post-item flex" href="{:url('cms/post/info', ['id' => $vo['id']])}">
                        <div class="cover" style="">
                            <img src="{$vo.cover}" alt="{$vo.title}">
                        </div>
                        <div class="content">
                            <div class="title">
                                {$vo.title}
                            </div>
                            <div class="description">
                                {$vo.description}
                            </div>
                            <div class="info">
                                <span>{$vo.post_time|time_format}</span>
                                <span>{$vo.view_count}</span>
                            </div>
                        </div>
                    </a>
                {/volist}
            </div>
        </el-main>
        <el-aside>
            <div>
                <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- S1 -->
                <ins class="adsbygoogle"
                     style="display:block"
                     data-ad-client="ca-pub-7266354568159410"
                     data-ad-slot="3395060858"
                     data-ad-format="auto"
                     data-full-width-responsive="true"></ins>
                <script>
                     document.addEventListener('DOMContentLoaded', function () {
                         document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                         (adsbygoogle = window.adsbygoogle || []).push({});
                     }, false);
                </script>
            </div>
            <div>
                <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- S2 -->
                <ins class="adsbygoogle"
                     style="display:block"
                     data-ad-client="ca-pub-7266354568159410"
                     data-ad-slot="7666312502"
                     data-ad-format="auto"
                     data-full-width-responsive="true"></ins>
                <script>
                     document.addEventListener('DOMContentLoaded', function () {
                         document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                         (adsbygoogle = window.adsbygoogle || []).push({});
                     }, false);
                </script>
            </div>
            <div>
                <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- S3 -->
                <ins class="adsbygoogle"
                     style="display:block"
                     data-ad-client="ca-pub-7266354568159410"
                     data-ad-slot="3727067496"
                     data-ad-format="auto"
                     data-full-width-responsive="true"></ins>
                <script>
                     document.addEventListener('DOMContentLoaded', function () {
                         document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                         (adsbygoogle = window.adsbygoogle || []).push({});
                     }, false);
                </script>
            </div>
        </el-aside>
    </div>
{/block}
